<template>
  <div class="heads">
    <!-- <mt-header fixed>
      <mt-button slot="left" @click.native="left">返回</mt-button>
      <mt-button icon="more" slot="left" @click.native="left"></mt-button>
      <div class="mk">
        <p>123123</p>
        <input type="text" />
      </div>
    </mt-header>-->
    <div class="left" @click="left">
      <svg-icon icon-class="danlieliebiao"></svg-icon>
      <svg-icon icon-class="touxiang"></svg-icon>
    </div>
    <div class="middle">
      <div v-if="s==0">
        <input type="text" />
        <!-- <svg-icon icon-class="iconfontyouxihudong"></svg-icon> -->
      </div>
      <div v-else-if="s==1">
        <li>
          <a href>频道</a>
          <a href>分区</a>
        </li>
      </div>
      <div v-else-if="s==2">
        <li>
          <a href>视频</a>
          <a href>综合</a>
        </li>
      </div>
      <div v-else></div>
    </div>
    <div class="right">
      <div v-if="s==0">
        <svg-icon icon-class="xiazai"></svg-icon>
        <svg-icon icon-class="youjian"></svg-icon>
      </div>
      <div v-else-if="s==1"></div>
      <div v-else-if="s==2">
        <svg-icon icon-class="pinglun"></svg-icon>
      </div>
      <div v-else></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-head",
  props: ["sty", "fn"],
  data() {
    return {};
  },
  methods: {
    left() {
      this.$emit("fn", true);
    }
  },
  watch: {},
  computed: {
    s() {
      console.log(this.sty);
      switch (this.sty) {
        case "Index":
          return 0;
          break;
        case "Pd":
          return 1;
          break;
        case "Dt":
          return 2;
          break;
        case "Hyg":
          return 3;
          break;
      }
    },
    rig() {
      console.log(this.sty);
      switch (this.sty) {
        case "Index":
          return `<span>下</span>
      <span>邮</span>`;
          break;
        case "Pd":
          return ` `;
          break;
        case "Dt":
          return `<span>写</span>
      `;
          break;
        case "Hyg":
          return `<span>车</span> <span>头</span>`;
          break;
      }
    }
  },
  filters: {},
  components: {},
  directives: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  Mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>

<style lang='less'>
.heads {
  position: fixed;
  top: 0;
  height: 3rem;
  left: 0;
  width: 100%;
  background: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    flex: 1;
    display: flex;
    div {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding: 0 0.5rem;
    }
  }
  span {
    padding: 0 0.5rem;
  }
  input {
    border: none;
    border-radius: 0.5rem;
    width: 8rem;
    height: 1.2rem;
  }
}
</style>